{% extends 'base.html' %}
{% load mymarkdown %}
{% block title %}
    详情页面
{% endblock %}
{% block left %}
<!-- 在 <head> 标签中添加以下代码 -->
<head>

    <style>
        #comments {
    margin-top: 30px;
}

#comment-form {
    max-width: 500px;
    margin-top: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#comment-form label {
    display: block;
    margin-bottom: 5px;
}

#comment-form input[type="text"],
#comment-form input[type="email"],
#comment-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

#comment-form textarea {
    resize: vertical;
}

#comment-form button[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

#comment-form button[type="submit"]:hover {
    background-color: #3e8e41;
}

#comment-list {
    margin-top: 20px;
}

.comment {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}



.comment-author {
    font-size: 18px;
    margin-bottom: 5px;
}

.comment-date {
    font-size: 14px;
    color: gray;
    margin-left: auto;
}

.comment-content {
    font-size: 16px;
    line-height: 1.5;
}

    </style>
 <script src="http://static.geetest.com/v4/gt4.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
</head>


    <div id="main">
        <article class="article article-type-post">
            <div class="article-meta">
                <a class="article-date">
                    <time>{{ post.created }}</time>
                </a>
                <div class="article-category">
                    <a class="article-category-link" href="#" target="_blank">{{ post.category.cname }}</a>
                </div>
            </div>
            <div class="article-inner">
                <header class="article-header">
                    <h1 itemprop="name">
                        <a class="article-title">{{ post.title }}</a>
                    </h1>
                </header>
                <div class="article-entry" itemprop="articleBody">
                    <h2>前言</h2>
                    {{ post.desc }}
                    <hr>
                    {{ post.content|md|safe}}
                </div>
            </div>







<section id="comments">

<div>
                       <img src="/img/good?" width="40px" id="codeImage">
    <label> 点赞数：{{ count }}</label>
      <img src="/img/collect?" width="40px" id="code">

        <script>
                        $(function (){
                            $("#codeImage").click(function (){
                                var url=$(this).attr('src');
                                $(this).attr('src',url+'?');
                            });
                        })

                        $(function (){
                            $("#code").click(function (){
                                var url=$(this).attr('src');
                                $(this).attr('src',url+'?');
                            });
                        })
                    </script>
                   </div>

    <h2>留言</h2>
    <form id="comment-form" method="post">
         {% csrf_token %}
        <div>
            <textarea name="comment" id="comment" rows="5"></textarea>
        </div>
        <button type="submit">发表留言</button>
    </form>

</section>

   <div>
       <form id="comment-form" method="get" >
            <button type="submit">刷新</button>
       </form>
   </div>


{% for i in data %}
<section id="comments">
<div class="comment">
    <div class="comment-details">
        <form id="comment-form" method="get">
        <h4 class="comment-author">{{i.1}} ：</h4>
        <span class="comment-date">{{ i.2 }}</span>
        <p class="comment-content">{{ i.3 }}</p>
    </form>

    </div>
</div>
</section>
{% endfor %}




        </article>
  </div>

        {% endblock %}
